﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="/css/redmond/common.css" type="text/css" media="all" />
    <link rel="stylesheet" href="/css/redmond/jquery-ui-1.8.18.custom.css" type="text/css"
        media="all" />

    <script type="text/javascript" src="/scripts/jquery-1.7.1.min.js"></script>

    <script type="text/javascript" src="/scripts/jquery-ui-1.8.18.custom.min.js"></script>

</head>
<body style="font-size: 9pt;">
    <div align="center">
        <div>
            <table style="width: 600px; border-collapse: collapse; background-color: #d0e5f5;"
                class="single-border">
                <tr class="table-body" align="left">
                    <td>
                        <table style="width: 100%; border-collapse: collapse;" class="single-border">
                            <tr style="height: 29px;">
                                <td style="width: 100px;" align="center">
                                    主问题
                                </td>
                                <td align="right">
                                    <button name="ExpandButton" style="font-size: 0pt;">
                                        <span class="ui-icon ui-icon-minusthick"></span>
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td style="width: 100px;" align="center" class="single-border">
                                    问题
                                </td>
                                <td class="single-border">
                                    <textarea name="TextArea1" cols="20" name="S1" rows="2" style="width: 98%; height: 100px;">5.蜗牛前进的速度每秒只有1.5mm，恰好是某人步行速度的千分之一，那么此人步行的速度大约是每小时{0}。
&nbsp;A.9公里 B.5.4公里 C.900米 D.540米</textarea>
                                </td>
                            </tr>
                            <tr>
                                <td align="center" class="single-border">
                                    类型
                                </td>
                                <td class="single-border">
                                    <select id="Select1">
                                        <option selected value="Select">选择题</option>
                                        <option value="FillsUp">填空题</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td align="center" class="single-border">
                                    答案
                                </td>
                                <td class="single-border">
                                    <input id="Text1" type="text" />(以","号分隔)
                                </td>
                            </tr>
                            <tr>
                                <td align="center" class="single-border">
                                    分数
                                </td>
                                <td class="single-border">
                                    <input id="Text2" type="text" style="width: 50px;" />
                                </td>
                            </tr>
                            <tr>
                                <td align="center" class="single-border">
                                    操作
                                </td>
                                <td class="single-border">
                                    <button name="InsertGuideLink">
                                        新增选项提示</button>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td align="center" name="AnswerArea">
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div style="display: none;">
        <div id="GuideLinkTemplate">
            <table style="width: 600px; border-collapse: collapse;" class="single-border">
                <tr class="table-body" align="left">
                    <td>
                        <table style="width: 100%; border-collapse: collapse;" class="single-border">
                            <tr class="table-body" style="height: 29px;">
                                <td style="width: 100px;" align="center" class="single-border">
                                    选择的答案
                                </td>
                                <td class="single-border" align="left">
                                    <input id="Text3" type="text" style="width: 100px;" />
                                </td>
                                <td class="single-border" align="center" style="width: 20px;">
                                    <button name="ExpandButton" style="font-size: 0pt;">
                                        <span class="ui-icon ui-icon-minusthick"></span>
                                    </button>
                                </td>
                            </tr>
                            <tr class="table-body">
                                <td align="center" class="single-border">
                                    对应的提示
                                </td>
                                <td class="single-border" align="left" colspan="2">
                                    <textarea id="Tip" cols="20" name="S1" rows="2" style="width: 98%; height: 100px;"></textarea>
                                </td>
                            </tr>
                            <tr class="table-body">
                                <td align="center" class="single-border">
                                    对应的知识点
                                </td>
                                <td class="single-border" align="left" colspan="2">
                                    <input id="Text5" type="text" style="width: 50px;" />
                                </td>
                            </tr>                            
                            <tr class="table-body">
                                <td align="center" class="single-border">
                                    下一步导向
                                </td>
                                <td class="single-border" align="left" colspan="2">
                                    <select id="Select3">
                                        <option selected value="Select">选择题</option>
                                        <option value="FillsUp">填空题</option>
                                    </select>
                                </td>
                            </tr>
                            <tr class="table-body">
                                <td align="center" class="single-border">
                                    操作
                                </td>
                                <td class="single-border" align="left" colspan="2">
                                    <button name="InsertGuide">
                                        确定</button>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td align="center" name="AnswerArea">
                    </td>
                </tr>
            </table>
        </div>
        <div id="GuideTemplate">
            <table style="width: 600px; border-collapse: collapse;"
                class="single-border">
                <tr class="table-body" align="left">
                    <td>
                        <table style="width: 100%; border-collapse: collapse;" class="single-border">
                            <tr style="height: 29px;">
                                <td style="width: 100px;" align="center">
                                    引导问题名称
                                </td>
                                <td align="left">
                                    <input id="Text6" type="text" />
                                </td>
                                <td class="single-border" align="center" style="width: 20px;">
                                    <button name="ExpandButton" style="font-size: 0pt;">
                                        <span class="ui-icon ui-icon-minusthick"></span>
                                    </button>
                                </td>
                            </tr>
                        </table>
                        <table style="width: 100%; border-collapse: collapse;">
                            <tr>
                                <td style="width: 100px;" align="center" class="single-border">
                                    问题
                                </td>
                                <td class="single-border" colspan="2">
                                    <textarea id="TextArea2" cols="20" name="S1" rows="2" style="width: 98%; height: 100px;">5.蜗牛前进的速度每秒只有1.5mm，恰好是某人步行速度的千分之一，那么此人步行的速度大约是每小时{0}。
&nbsp;A.9公里 B.5.4公里 C.900米 D.540米</textarea>
                                </td>
                            </tr>
                            <tr>
                                <td align="center" class="single-border">
                                    类型
                                </td>
                                <td class="single-border" colspan="2">
                                    <select id="Select2">
                                        <option selected value="Select">选择题</option>
                                        <option value="FillsUp">填空题</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td align="center" class="single-border">
                                    答案
                                </td>
                                <td class="single-border" colspan="2">
                                    <input id="Text4" type="text" />(以","号分隔)
                                </td>
                            </tr>
                            <tr>
                                <td align="center" class="single-border">
                                    操作
                                </td>
                                <td class="single-border" colspan="2">
                                    <button name="InsertGuideLink">
                                        新增选项提示</button>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td align="center" name="AnswerArea">
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <script language="javascript">
        $(function event() {
            //Init
            $("button").button();
            $("button[name='InsertGuideLink']").bind("click", { divName: "#GuideLinkTemplate" }, InsertDiv);
            $("button[name='InsertGuide']").bind("click", { divName: "#GuideTemplate" }, InsertDiv);
            $("button[name='ExpandButton']").click(function() {
                var $div = $(this).parents("div:first");
                var tdheight = 32;
                var $child = $(this).find(".ui-icon-plusthick, .ui-icon-minusthick");
                if ($child.hasClass("ui-icon-plusthick")) {
                    $child.removeClass("ui-icon-plusthick").addClass("ui-icon-minusthick");

                    var offset = $div.attr("offset");
                    $div.css("overflow", "visible");
                    $div.animate({ height: "+=" + offset }, 200, function() { $div.css("cssText", ""); });
                }
                else {
                    $child.removeClass("ui-icon-minusthick").addClass("ui-icon-plusthick");

                    var offset = $div.height() - tdheight;
                    $div.attr("offset", offset);
                    $div.css("overflow", "hidden");
                    $div.animate({ height: "-=" + offset }, 200);
                }
            });
        });
        function InsertDiv(event) {
            var $div = $(event.srcElement).parents("div:first");
            var $area = $div.find("td[name='AnswerArea']:first");
            var $i = $(event.data.divName).clone(true).removeAttr("id");
            $i.children().css("background-color", ChangeBackgroundColor($div.children().css("background-color")));
            $i.appendTo($area);
        }
        function ChangeBackgroundColor(originColor) {
            
            var rate = 0.2;
            originColor = originColor.toLowerCase()
            var r = originColor.substring(1, 3);
            var g = originColor.substring(3, 5);
            var b = originColor.substring(5, 7);

            var r1 = parseInt((255 - ConvertToDecimal(r)) * rate + ConvertToDecimal(r));
            var g1 = parseInt((255 - ConvertToDecimal(g)) * rate + ConvertToDecimal(g));
            var b1 = parseInt((255 - ConvertToDecimal(b)) * rate + ConvertToDecimal(b));
            return "#" + ConvertToHex(r1) + ConvertToHex(g1) + ConvertToHex(b1)
        }
        function ConvertToDecimal(hex) {
            var a = hex.charCodeAt(0) >= 97 ? (hex.charCodeAt(0) - 87) : (hex.charCodeAt(0) - 48);
            var b = hex.charCodeAt(1) >= 97 ? (hex.charCodeAt(1) - 87) : (hex.charCodeAt(1) - 48);
            return a * 16 + b;
        }
        function ConvertToHex(dec) {
            var hex = "";
            while (dec / 16 != 0) {
                var i = dec % 16;
                if (i >= 10)
                    hex = String.fromCharCode(i + 87) + hex;
                else
                    hex = i + hex;
                dec = parseInt(dec / 16);
            }
            return hex;
        }
    </script>

</body>
</html>
